Third-party Libraries দিয়ে Form Validation (Formik, Yup)

React Native অ্যাপ্লিকেশনগুলিতে ফর্ম তৈরি করা এবং সেগুলির ভ্যালিডেশন করা সাধারণ কাজগুলির মধ্যে একটি। যদিও React Native এর মধ্যে কিছু মৌলিক স্টেট পরিচালনার সরঞ্জাম রয়েছে, তবে ফর্ম ভ্যালিডেশন আরও সহজ এবং কার্যকরী করার জন্য আমরা Formik এবং Yup ব্যবহার করতে পারি। Formik ফর্ম স্টেট পরিচালনা করার জন্য এবং Yup ফর্ম ভ্যালিডেশন করার জন্য ব্যবহৃত হয়।

এখানে Formik এবং Yup এর মাধ্যমে ফর্ম ভ্যালিডেশন করার একটি উদাহরণ দেখানো হলো।

Step 1: প্যাকেজ ইনস্টল করা

প্রথমে, আপনাকে Formik এবং Yup ইনস্টল করতে হবে। নিচের কমান্ডটি ব্যবহার করুন:

npm install formik yup

Step 2: Formik এবং Yup ব্যবহার করা

এখন আমরা একটি উদাহরণ তৈরি করব যেখানে Formik এবং Yup ব্যবহার করে একটি সিম্পল ফর্ম ভ্যালিডেশন তৈরি করা হবে।

import React from 'react';
import { View, TextInput, Text, Button, StyleSheet } from 'react-native';
import { Formik } from 'formik';
import * as Yup from 'yup';

// Yup Validation Schema
const validationSchema = Yup.object().shape({
  username: Yup.string()
    .required('Username is required')
    .min(3, 'Username must be at least 3 characters'),
  email: Yup.string()
    .email('Invalid email address')
    .required('Email is required'),
  password: Yup.string()
    .required('Password is required')
    .min(6, 'Password must be at least 6 characters'),
});

const App = () => {
  return (
    <View style={styles.container}>
      <Formik
        initialValues={{ username: '', email: '', password: '' }}
        validationSchema={validationSchema}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (
          <>
            <TextInput
              style={styles.input}
              placeholder="Username"
              onChangeText={handleChange('username')}
              onBlur={handleBlur('username')}
              value={values.username}
            />
            {touched.username && errors.username && (
              <Text style={styles.errorText}>{errors.username}</Text>
            )}

            <TextInput
              style={styles.input}
              placeholder="Email"
              onChangeText={handleChange('email')}
              onBlur={handleBlur('email')}
              value={values.email}
            />
            {touched.email && errors.email && (
              <Text style={styles.errorText}>{errors.email}</Text>
            )}

            <TextInput
              style={styles.input}
              placeholder="Password"
              secureTextEntry
              onChangeText={handleChange('password')}
              onBlur={handleBlur('password')}
              value={values.password}
            />
            {touched.password && errors.password && (
              <Text style={styles.errorText}>{errors.password}</Text>
            )}

            <Button onPress={handleSubmit} title="Submit" />
          </>
        )}
      </Formik>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    padding: 20,
  },
  input: {
    height: 40,
    borderColor: '#ccc',
    borderWidth: 1,
    marginBottom: 10,
    paddingLeft: 8,
  },
  errorText: {
    fontSize: 12,
    color: 'red',
  },
});

export default App;

কোডের ব্যাখ্যা

1. Formik ব্যবহার:
   • Formik লাইব্রেরি দ্বারা ফর্মের স্টেট, ভ্যালিডেশন এবং সাবমিশন পরিচালনা করা হয়। ফর্মের ইনিশিয়াল ভ্যালু, ভ্যালিডেশন স্কিমা এবং সাবমিট ফাংশন এখানে সেট করা হয়েছে।
   • handleChange, handleBlur, handleSubmit এর মাধ্যমে ফর্মের ইনপুট পরিবর্তন, ব্লার এবং সাবমিট কন্ট্রোল করা হয়।
2. Yup Validation Schema:
   • Yup এর মাধ্যমে একটি ভ্যালিডেশন স্কিমা তৈরি করা হয়েছে। এখানে প্রতিটি ফিল্ডের জন্য প্রয়োজনীয়তা, মিনিমাম লেন্থ এবং ইমেল ফরম্যাট চেক করা হয়েছে।
   • উদাহরণস্বরূপ, username ফিল্ডে min(3) ব্যবহার করা হয়েছে, যার মানে এটি ৩টি অক্ষরের কম হতে পারবে না এবং required() ব্যবহার করা হয়েছে যা এই ফিল্ডটি অবশ্যই পূর্ণ করতে হবে।
3. এরর হ্যান্ডলিং:
   • যদি ফিল্ডে কোনো ত্রুটি থাকে, তবে Formik-এর errors এবং touched অবজেক্ট ব্যবহার করে ত্রুটির বার্তা প্রদর্শন করা হয়েছে।
4. ইউজার ইন্টারফেস:
   • TextInput ব্যবহার করে ফর্ম ফিল্ড তৈরি করা হয়েছে। secureTextEntry ব্যবহার করে পাসওয়ার্ড ইনপুটের ক্ষেত্রকে সিক্রেট তৈরি করা হয়েছে।
   • Button ব্যবহার করে ফর্ম সাবমিট করা হয়েছে।

ফিচার ও সুবিধা

• Formik:
  • ফর্ম স্টেট ম্যানেজমেন্ট: ফর্মের ইনপুট, এরর এবং সাবমিট স্টেট খুব সহজে ম্যানেজ করতে সাহায্য করে।
  • পুনঃব্যবহারযোগ্য ফর্ম: ফর্মের সবকটি অংশকে এক জায়গায় ম্যানেজ করা সহজ হয়, ফলে কোড পুনঃব্যবহারযোগ্য হয়।
• Yup:
  • বৈধতা চেক করা: ফিল্ডের বিভিন্ন শর্ত পূর্ণ কিনা তা চেক করা সহজ হয় (যেমন: ইমেল ফরম্যাট, মিনিমাম লেন্থ)।
  • কাস্টম ভ্যালিডেশন: আপনি প্রয়োজন হলে কাস্টম ভ্যালিডেশনও তৈরি করতে পারেন।

সারাংশ

Formik এবং Yup ব্যবহার করে React Native-এ ফর্ম ভ্যালিডেশন করা সহজ এবং কার্যকর। Formik ফর্মের স্টেট ম্যানেজমেন্টের জন্য ব্যবহৃত হয়, আর Yup ফর্মের ভ্যালিডেশন স্কিমা তৈরিতে সহায়ক। এই দুটি লাইব্রেরি একত্রে ব্যবহার করলে ফর্মের কার্যকারিতা এবং কোডের গঠন অনেক সহজ এবং পরিষ্কার হয়।